<template>
  <view class="weather-container">
    <button @click="fetchTomorrowWeather">获取明天天气预报</button>
    <view class="weather-card" v-if="weatherData">
      <view class="weather-item">日期：{{ weatherData.date }}</view>
      <view class="weather-item">星期：{{ weatherData.week }}</view>
      <view class="weather-item">最高温：{{ weatherData.high }}</view>
      <view class="weather-item">最低温：{{ weatherData.low }}</view>
    </view>
    <view class="empty-tip" v-else>点击按钮获取天气预报</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherData: null
    }
  },
  methods: {
    fetchTomorrowWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          console.log("success-----" + JSON.stringify(res));
          if (res.statusCode === 200 && res.data.status === 200) {
            const tomorrowForecast = res.data.data.forecast[1]; 
            this.weatherData = {
              date: tomorrowForecast.date,
              week: tomorrowForecast.week,
              high: tomorrowForecast.high.replace('℃', ''),
              low: tomorrowForecast.low.replace('℃', '')
            };
          } else {
            uni.showToast({
              title: '天气数据获取失败',
              icon: 'none'
            });
          }
        },
        fail: (eMsg) => {
          console.log("request fail-----" + eMsg);
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.weather-container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.weather-card {
  margin-top: 30rpx;
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
.weather-item {
  line-height: 1.8;
  font-size: 28rpx;
}
.empty-tip {
  margin-top: 30rpx;
  color: #999;
  font-size: 28rpx;
}
button {
  width: 280rpx;
  height: 80rpx;
  line-height: 80rpx;
}
</style>